<template>
  <div>
    <mt-field label="用户名" placeholder="请输入用户名" v-model="username">{{this.username}}</mt-field>
    <mt-field label="邮箱" placeholder="请输入邮箱" v-show="visible" type="email" v-model="email">{{this.email}}</mt-field>
    <mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="phone">{{this.phone}}</mt-field>
    <mt-field label="密码" placeholder="请输入密码" type="password" v-model="password1">{{this.password1}}</mt-field>
    <mt-field label="重复密码" placeholder="请再输入密码" type="password" v-model="password2">{{this.password2}}</mt-field>
    <mt-button type="default" class="set-button1">修改</mt-button>
    <mt-button type="default" class="set-button2" @click="btnChange">重置</mt-button>
  </div>
</template>

<script>
  import { Button } from 'mint-ui';
  import { Field } from 'mint-ui';
    export default {
      name: "set-content",
      components:{
          MtField:Field,
          MtButton:Button
    },
      data:function () {
        return{
          username:'',
          email:'',
          password1:null,
          password2:null,
          phone:null,
          visible:true,
        }
      },
      methods:{
        btnChange:function () {
          this.username = '';
          this.email = '';
          this.password = null;
          this.phone = null;
        }
      }
    }
</script>

<style scoped>
  .set-button1{
    margin-top: 1rem;
    margin-left: 0rem;
    margin-right: 6.5rem;

  }
  .set-button1{
    margin-top: 1rem;
    margin-right: 3rem;
  }
</style>
